<script setup>
import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import UPopup from "../../uni_modules/uview-plus/components/u-popup/u-popup.vue";
import {history, my, saveUserInfo, uploadImage} from "../../request/api";
import {ref} from "vue";
import {onLoad,onShow, onShareAppMessage, onShareTimeline} from "@dcloudio/uni-app";
import {BASEURL} from "../../request/request";

const userinfo = ref({});//用户信息
const show = ref(false);//修改信息
const historyList = ref([]);//历史比赛
onShow(()=>{
  if (!uni.getStorageSync('token')){
    uni.navigateTo({
      url:'/pages/login/login'
    })
  }else {
    getUserinfo();
    getHistoryList();
  }
})
onShareAppMessage(()=>{
  return {
    imageUrl:'/static/cover.png',
    path: '/pages/login/login',
  }
});
onShareTimeline(()=>{
  return{
    imageUrl:'/static/cover.png',
    path: '/pages/login/login',
  }
});
//获取用户信息
const getUserinfo = () => {
  my().then(res=>{
    userinfo.value = res.data.data;
    userinfo.value._image = res.data.data.image;
    userinfo.value._name = res.data.data.name;
  })
}
//获取历史比赛
const getHistoryList = () => {
  history({
    page:1,
    size:999
  }).then(res=>{
    historyList.value = res.data;
  })
}
const timestampToDate = (timestamp)=> {
  const date = new Date(timestamp * 1000); // 将秒级时间戳转换为毫秒级时间戳
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补足两位数
  const day = String(date.getDate()).padStart(2, '0'); // 补足两位数的日期

  return `${year}-${month}-${day}`;
}
//选择头像
const chooseAvatar = async (e) => {
  let url =  await uploadImage(e.detail.avatarUrl)
  userinfo.value._image =BASEURL+ url;
}

const handlerSave = () => {
  if (!userinfo.value._image) return uni.showToast({
    title:'请上传头像',
    icon:'none'
  })
  if (!userinfo.value._name) return uni.showToast({
    title:'请输入昵称',
    icon:'none'
  })
  saveUserInfo({
    image:userinfo.value._image,
    name:userinfo.value._name,
  }).then(()=>{
    uni.showToast({
      title:'保存成功',
      icon:'none'
    });
    show.value = false;
    getUserinfo();
  })
}
</script>

<template>
<view class="user">
  <u-navbar placeholder left-icon="" title="个人中心"></u-navbar>
  <scroll-view scroll-y class="scroll-y">
    <view class="container">
      <view class="userinfo">
        <image :src="userinfo.image || '/static/cover.png'"></image>
        <view>
          <text>{{userinfo.name}}</text>
          <text>{{userinfo.mobile}}</text>
        </view>
        <text  @click="()=>{
          show = true;
        }">修改资料</text>
      </view>
      <view class="dan">
        <view>
          <text>我的段位:</text>
          <text style=" color: #F2931A;">{{userinfo.duanwei || '暂无'}}</text>
        </view>
        <view v-if="false">
          <text>我的战队:</text>
          <text style=" color: #2D6E37;">西游本想</text>
        </view>
      </view>
      <view class="statistics">
        <text>比赛统计</text>
        <view class="list">
          <view>
            <text>总对局数</text>
            <text>{{userinfo.zdjs || 0}}</text>
          </view>
          <view>
            <text>总积分</text>
            <text>{{userinfo.jifen || 0}}</text>
          </view>
          <view>
            <text>总得分</text>
            <text>{{userinfo.defen || 0}}</text>
          </view>
          <view>
            <text>平均得分</text>
            <text>{{userinfo.pingjundefen || 0}}</text>
          </view>
          <view>
            <text>总放炮</text>
            <text>{{userinfo.dianpaoshu || 0}}</text>
          </view>
          <view>
            <text>放炮率</text>
            <text>{{userinfo.dianpaolv || 0}}</text>
          </view>
          <view>
            <text>总积分</text>
            <text>{{userinfo.jifen || 0}}</text>
          </view>
          <view>
            <text>大牌数</text>
            <text>{{userinfo.dapaishu || 0}}</text>
          </view>
          <view>
            <text>大牌率</text>
            <text>{{userinfo.dapailv || 0}}</text>
          </view>
          <view>
            <text>平均顺位</text>
            <text>{{userinfo.pingjunshunwei || 0}}</text>
          </view>
<!--          <view>
            <text>第一名概率</text>
            <text>20%</text>
          </view>
          <view>
            <text>第二名概率</text>
            <text>20%</text>
          </view>
          <view>
            <text>第三名概率</text>
            <text>20%</text>
          </view>
          <view>
            <text>第四名概率</text>
            <text>20%</text>
          </view>-->

        </view>
      </view>

      <view v-if="historyList.length" class="race-history">
        <text>比赛历史</text>
        <view class="item" v-for="(item,index) of historyList" :key="index">
          <view class="count">
            <text>比赛序号：{{item.sort}}</text>
            <text>局数：{{item.js}}</text>
            <text>盘数：{{item.ps}}</text>
            <text>地址：{{item.didian}}</text>
          </view>
          <view class="time">
            <text>{{timestampToDate(item.game_time)}}</text>
            <image v-if="item.pm===1" src="/static/first.png"></image>
            <image v-if="item.pm===2" src="/static/second.png"></image>
            <image v-if="item.pm===3" src="/static/third.png"></image>
            <image v-if="item.pm===4" src="/static/four.png"></image>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</view>
  <u-popup closeable @close="show = false"  :round="16" title="修改资料" :show="show">
    <view class="edit-info">
      <view class="item">
        <text>头像</text>
        <button open-type="chooseAvatar" @chooseavatar="chooseAvatar">
          <image :src="userinfo._image || '/static/cover.png'"></image>
        </button>
      </view>
      <view class="item">
        <text>昵称</text>
        <view>
          <input  v-model="userinfo._name" type="nickname" placeholder="请输入昵称">
        </view>
      </view>
      <text @click="handlerSave">保存</text>
    </view>
  </u-popup>

</template>

<style scoped lang="scss">
.edit-info{
  height: 60vh;
  width: 100%;
  background: #F0F3F7;
  padding: 80rpx 30rpx 30rpx 30rpx;
  display: flex;
  flex-direction: column;
  > text {
    width: 100%;
    margin-top: 50rpx;
    height: 80rpx;
    background: #2D6E37;
    border-radius: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
  }
  .item{
    padding: 30rpx;
    width: 100%;
    display: flex;
    background-color: #fff;
    align-items: center;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    justify-content: space-between;
    input{
      font-weight: 400;
      font-size: 32rpx;
      color: #333;
      text-align: right;
      line-height: 44rpx;
    }
    button{
      width: 100rpx;
      height: 100rpx;
      padding: unset;
      margin: unset!important;
      background-color: unset;
      &:after{
        border: unset;
      }
      image{
        width: 100rpx;
        border-radius: 50%;
        height: 100rpx;
      }
    }
    >text{
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      line-height: 44rpx;
    }
  }
}

.user{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #EDEDED;
  .container{
    padding: 37rpx 30rpx;
    display: flex;
    flex-direction: column;
    .race-history{
      margin-top: 60rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      .item{
        width: 100%;
        display: flex;
        border-bottom: 1px solid #F5F5F5;
        background: #FFFFFF;
        border-radius: 10rpx;
        padding: 30rpx;
        justify-content: space-between;
        margin-bottom: 19rpx;
        .time {
          display: flex;
          flex-direction: column;

          image {
            margin-top: 31rpx;
            width: 82rpx;
            height: 101rpx;
            align-self: flex-end;
          }

          text {
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
          }
        }

        .count {
          display: flex;
          flex-direction: column;
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
          gap: 21rpx;
        }
      }
      >text{
        font-weight: 400;
        font-size: 26rpx;
        margin-bottom: 29rpx;
        color: #666666;
        padding-left: 32rpx;
      }
    }
    .statistics{
      margin-top: 37rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      >view{
        background: #FFFFFF;
        border-radius: 10rpx;
        margin-top: 29rpx;
        padding: 16rpx 30rpx;
        display: flex;
        flex-direction: column;
        >view{
          padding: 48rpx 0;
          &:last-child{
            border-bottom: unset;
          }
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1rpx solid #EDEDED;
          text:last-child{
            font-family: Arial;
            font-weight: 400;
            font-size: 36rpx;
            color: #333333;
          }
          text:first-child{
            font-weight: 400;
            font-size: 30rpx;
            color: #222222;
          }
        }
      }
      >text{
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
        padding-left: 32rpx;
      }
    }
    .dan{
      width: 100%;
      height: 99rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      margin-top: 29rpx;
      display: flex;
      align-items: center;
      view{
        width: 50%;
        display: flex;
        align-items: center;
        padding-left: 30rpx;
        text:last-child{
          font-weight: bold;
          font-size: 34rpx;

        }
        text:first-child{
          font-weight: 400;
          font-size: 24rpx;
          margin-right: 12rpx;
          color: #222222;
        }
      }
    }
    .userinfo{
      display: flex;
      align-items: center;
      width: 100%;
      >text{
        margin-left: auto;
        width: 141rpx;
        height: 56rpx;
        background: #2D6E37;
        border-radius: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;
      }
      view{
        display: flex;
        flex-direction: column;
        margin-left: 21rpx;
        text:last-child{
          font-weight: 400;
          margin-top: 15rpx;
          font-size: 24rpx;
          color: #999999;
        }
        text:first-child{
          font-weight: 500;
          font-size: 36rpx;
          color: #222222;
        }
      }
      image{
        width: 134rpx;
        height: 134rpx;
        border-radius: 16rpx;
        border: 6px solid #FFFFFF;
      }
    }
  }
}
</style>
